<template>
  <div class="chart-content" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import { postAction } from '@/api/manage'

export default {
  name: 'VehiclesRegistrationChart',
  data() {
    return {
      echartsInstance: null,
      qsData: ['东营区', '河口区', '垦利区', '利津县', '广饶县', '东营开发区'],
      hylData: [18000, 18000, 18000, 18000, 18000, 18000]
    }
  },
  mounted() {
    this.getChartData()
  },
  beforeDestroy() {
    if (!this.echartsInstance) {
      return
    }
    this.echartsInstance.dispose()
    this.echartsInstance = null
  },
  methods: {
    async getChartData() {
      const res = await postAction(
        'topic/data/listAllData/dy_ydd_jtys_dfjtys_gqxjdczcdj',
        {}
      )
      if (res.success) {
        this.qsData = []
        this.hylData = []
        const data = res.result.data
        data.forEach(item => {
          this.qsData.push(item.xq)
          this.hylData.push(item.jdczcdj)
        })
        this.initEcharts()
      }
    },
    async initEcharts() {
      if (!this.echartsInstance) {
        this.echartsInstance = echarts.init(this.$refs.chart)
      }

      const echartsOption = {
        color: [
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'hsla(194, 100%, 64%, 1)'
            },
            {
              offset: 1,
              color: 'hsla(214, 64%, 59%, 1)'
            }
          ])
        ],
        legend: {
          show: false,
          itemHeight: 25,
          itemWidth: 25,
          icon: 'rect',
          data: [
            {
              name: '运输量'
            }
          ],
          itemGap: 250, // 设置间距，
          left: 'center',
          bottom: 30,
          textStyle: {
            color: '#ffffff',
            fontWeight: '400',
            fontFamily: 'Microsoft YaHei',
            fontSize: 26,
            padding: [6, 0, 0, 10],
            rich: {
              a: {
                verticalAlign: 'middle'
              }
            }
          }
        },
        // 提示框
        tooltip: {
          show: true,
          trigger: 'axis',
          textStyle: { fontSize: 12 },
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: 0,
          bottom: 0,
          right: 0,
          top: 25,
          containLabel: true
        },
        animation: true,
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            // x轴
            axisLabel: {
              // inside: false,
              interval: 0,
              textStyle: {
                color: '#fff',
                fontWeight: 400,
                fontFamily: 'Microsoft YaHei',
                fontSize: 12
              },
              margin: 4 // 刻度标签与轴线之间的距离。
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#669BD1',
                width: 2
              }
            },
            data: this.qsData
          }
        ],
        yAxis: [
          {
            name: '单位：辆',
            nameTextStyle: {
              fontSize: 12,
              color: '#ffffff',
              align: 'center'
            },
            nameGap: 10,
            show: true,
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontWeight: 400,
                fontFamily: 'Microsoft YaHei',
                fontSize: 12
              },
              margin: 6 // 刻度标签与轴线之间的距离。
            },
            splitLine: {
              // 设置Y轴的网格线
              show: true,
              lineStyle: {
                color: '#B9F7FF',
                opacity: 0.3,
                width: 1
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#669BD1',
                width: 2
              }
            }
          }
        ],
        series: [
          {
            name: '登记数量',
            type: 'bar',
            barWidth: 16,
            data: this.hylData,
            tooltip: {
              valueFormatter: value => `${value}辆`
            }
          }
        ]
      }

      this.echartsInstance.setOption(echartsOption)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-content {
  width: 100%;
  height: 100%;
}
</style>
